<template>
  <div class="DpBodyLayout" :scroll="{ y: 'calc(100vh - 383px)' }">
    <div>
      <DpHeader title="数字总览" subtitle="简介"></DpHeader>
      <div class="Dp-num">
        <div class="content">
          <div class="left">
            <div class="left-img">
              <ImageView :value="Data.numPic" height="150" class="img" />
            </div>
          </div>
          <div class="right">
            {{ Data.numtext }}
          </div>
        </div>
      </div>
    </div>
    <div class="Dp-zc">
      <DpHeader subtitle="资产统计"></DpHeader>
      <div class="zc">
        <div class="zc-bg">
          <div class="num">{{ Data.tjnum1 }}</div>
          <div class="text">{{ Data.tjtext1 }}</div>
        </div>
        <div class="zc-bg">
          <div class="num">{{ Data.tjnum2 }}</div>
          <div class="text">{{ Data.tjtext2 }}</div>
        </div>
        <div class="zc-bg">
          <div class="num">{{ Data.tjnum3 }}</div>
          <div class="text">{{ Data.tjtext3 }}</div>
        </div>
        <div class="zc-bg">
          <div class="num">{{ Data.tjnum4 }}</div>
          <div class="text">{{ Data.tjtext4 }}</div>
        </div>
        <div class="zc-bg">
          <div class="num">{{ Data.tjnum5 }}</div>
          <div class="text">{{ Data.tjtext5 }}</div>
        </div>
        <div class="zc-bg">
          <div class="num">{{ Data.tjnum6 }}</div>
          <div class="text">{{ Data.tjtext6 }}</div>
        </div>
      </div>
    </div>

    <div class="Dp-yx">
      <div style="font-size: 24px">数字营销</div>
      <div class="Dp-header">
        <DpHeader subtitle="销售统计"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value1" :options="plainOptions" @change="radioChange1" />
        </div>
      </div>
      <div class="yx">
        <div class="yx-comtent">
          <div>{{ Data.xs }}</div>
          <div>{{ Data.xsnum }}元</div>
        </div>
        <div class="yx-comtent">
          <div>{{ Data.tb }}</div>
          <div>{{ Data.tbnum }}%</div>
        </div>
        <div class="yx-comtent">
          <div>{{ Data.hb }}</div>
          <div>{{ Data.hbnum }}%</div>
        </div>
      </div>
    </div>

    <div class="Dp-yx" style="margin-top: 20px">
      <div class="Dp-header">
        <DpHeader subtitle="销售统计图表"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value2" :options="plainOptions" @change="radioChange2" />
        </div>
      </div>
      <div class="yx-price">
        <div class="yx-price-title">
          <div>产品</div>
          <div>销售金额</div>
          <div>销售量</div>
        </div>
        <div class="yx-price-content" v-for="item in props.productData">
          <div>{{ item.product }}</div>
          <div>{{ item.Amount }}</div>
          <div>{{ item.volume }}</div>
        </div>
      </div>
    </div>

    <div class="Dp-xsprice">
      <div class="Dp-header">
        <DpHeader subtitle="销售金额统计"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value3" :options="plainOptions" @change="radioChange3" />
        </div>
      </div>
      <div class="xsprice-content">
        <div class="xsprice-title">
          <div>时间</div>
          <div>金额</div>
        </div>
        <div v-for="(item, index) in months" :key="index" class="xsprice-text">
          <div>{{ item }}</div>
          <div>{{ xsData[index] }}</div>
        </div>
      </div>
    </div>

    <div class="Dp-cp">
      <div class="Dp-header">
        <DpHeader subtitle="月销售前五产品"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value4" :options="plainOptions" @change="radioChange4" />
        </div>
      </div>
      <div class="cp">
        <div class="cp-comtent">
          <div>{{ Data.cp1 }}</div>
          <div>{{ Data.cpnum1 }}元</div>
        </div>
        <div class="cp-comtent">
          <div>{{ Data.cp2 }}</div>
          <div>{{ Data.cpnum2 }}元</div>
        </div>
        <div class="cp-comtent">
          <div>{{ Data.cp3 }}</div>
          <div>{{ Data.cpnum3 }}元</div>
        </div>
        <div class="cp-comtent">
          <div>{{ Data.cp4 }}</div>
          <div>{{ Data.cpnum4 }}元</div>
        </div>
        <div class="cp-comtent">
          <div>{{ Data.cp5 }}</div>
          <div>{{ Data.cpnum5 }}元</div>
        </div>
      </div>
    </div>

    <div class="Dp-key">
      <div class="Dp-header">
        <DpHeader subtitle="重点销售区域"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value5" :options="plainOptions" @change="radioChange5" />
        </div>
      </div>
      <div class="key">
        <div class="key-comtent">
          <div class="text">排序</div>
          <div class="text">地区</div>
          <div class="text">销售金额</div>
        </div>
        <div class="key-comtent" v-for="(item, index) in props.keyaddress">
          <div class="text">{{ index + 1 }}</div>
          <div class="text">{{ item.area }}</div>
          <div class="text">{{ item.amount }}</div>
        </div>
      </div>
    </div>

    <div class="Dp-blurb">
      <DpHeader title="农机管理" subtitle="合作社简介"></DpHeader>
      <div class="blurb">
        <div class="blurb-comtent">
          <div>{{ Data.blurb }}</div>
        </div>
      </div>
    </div>

    <div class="Dp-nj">
      <div class="Dp-header">
        <DpHeader subtitle="农机数量统计"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value6" :options="plainOptions" @change="radioChange6" />
        </div>
      </div>
      <div class="nj">
        <div class="nj-comtent">
          <div>合作社名称</div>
          <div>数量</div>
        </div>
        <div class="nj-comtent">
          <div>{{ Data.nj1 }}</div>
          <div>{{ Data.njnum1 }}</div>
        </div>
        <div class="nj-comtent">
          <div>{{ Data.nj2 }}</div>
          <div>{{ Data.njnum2 }}</div>
        </div>
        <div class="nj-comtent">
          <div>{{ Data.nj3 }}</div>
          <div>{{ Data.njnum3 }}</div>
        </div>
        <div class="nj-comtent">
          <div>{{ Data.nj4 }}</div>
          <div>{{ Data.njnum4 }}</div>
        </div>
        <div class="nj-comtent">
          <div>{{ Data.nj5 }}</div>
          <div>{{ Data.njnum5 }}</div>
        </div>
      </div>
    </div>

    <div class="Dp-nj-time">
      <div class="Dp-header">
        <DpHeader subtitle="耕作时长统计"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value7" :options="plainOptions" @change="radioChange7" />
        </div>
      </div>
      <div class="nj-time">
        <div class="nj-time-comtent">
          <div>{{ Data.njTIme }}</div>
          <div>{{ Data.njTImeNumber }} 小时</div>
        </div>
        <div class="nj-time-comtent">
          <div>{{ Data.njtb }}</div>
          <div>{{ Data.njTbNumber }}%</div>
        </div>
        <div class="nj-time-comtent">
          <div>{{ Data.njhb }}</div>
          <div>{{ Data.njHbNumber }}%</div>
        </div>
      </div>
    </div>

    <div class="Dp-fw">
      <div class="Dp-header">
        <DpHeader subtitle="农机服务金额"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value8" :options="plainOptions" @change="radioChange8" />
        </div>
      </div>
      <div class="fw">
        <div class="fw-comtent">
          <div>{{ Data.yj }}</div>
          <div>{{ Data.yjnum }}</div>
        </div>
        <div class="fw-comtent">
          <div>{{ Data.sj }}</div>
          <div>{{ Data.sjnum }}</div>
        </div>
      </div>
    </div>

    <div class="Dp-jg">
      <DpHeader title="作物监管" subtitle="作物产量指标"></DpHeader>
      <div class="jg">
        <div class="jg-comtent">
          <div>{{ Data.fy }}</div>
          <div>{{ Data.fynum }}</div>
        </div>
        <div class="jg-comtent">
          <div>{{ Data.jd }}</div>
          <div>{{ Data.jdnum }}</div>
        </div>
        <div class="jg-comtent">
          <div>{{ Data.sf }}</div>
          <div>{{ Data.sfnum }}</div>
        </div>
      </div>
    </div>

    <!-- 种植面积 -->
    <div class="Dp-key">
      <div class="Dp-header">
        <DpHeader subtitle="种植面积"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value9" :options="plainOptions" @change="radioChange9" />
        </div>
      </div>
      <div class="key">
        <div class="key-comtent">
          <div class="text">作物名称</div>
          <div class="text">种植面积（亩）</div>
        </div>
        <div class="key-comtent" v-for="(item, index) in props.plantData">
          <div class="text">{{ item.plantType }}</div>
          <div class="text">{{ item.area }}</div>
        </div>
      </div>
    </div>

    <!-- 预计产量统计 -->
    <div class="Dp-key">
      <div class="Dp-header">
        <DpHeader subtitle="预计产量统计"></DpHeader>
        <div class="radio">
          <a-radio-group v-model:value="value10" :options="plainOptions" @change="radioChange10" />
        </div>
      </div>
      <div class="key">
        <div class="key-comtent">
          <div class="text">产量</div>
          <div class="text">单位</div>
        </div>
        <div class="key-comtent">
          <div class="text">{{ props.Data.yjnum }}</div>
          <div class="text">{{ props.Data.yjprice }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import DpHeader from '@/components/Dp/DpHeader.vue'
import ImageView from '@/components/ImageView/ImageView.vue'
import { ref, watch } from 'vue'
import api from '@/api'

//父组件传的数据
const props = defineProps({
  Data: {
    type: Array,
    default: () => []
  },
  months: {
    type: Array,
    default: () => []
  },
  productData: {
    type: Array,
    default: () => []
  },
  keyaddress: {
    type: Array,
    default: () => []
  },
  plantData: {
    type: Array,
    default: () => []
  }
})

//单选框数据
const plainOptions = ['接口数据', '配置数据']

//销售统计
const value1 = ref(props.Data.one)
const radioChange1 = async () => {
  if (value1.value == '接口数据') {
    let jkval = { one: value1.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { one: value1.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  }
}

//销售统计图表
const value2 = ref(props.Data.two)
const radioChange2 = async () => {
  if (value2.value == '接口数据') {
    let jkval = { two: value2.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { two: value2.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
    console.log(props.productData)
  }
}

//销售金额统计
const value3 = ref()
const radioChange3 = async () => {
  if (value3.value == '接口数据') {
    let jkval = { three: value3.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { three: value3.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  }
}

//月销售前五产品
const value4 = ref()
const radioChange4 = async () => {
  if (value4.value == '接口数据') {
    let jkval = { four: value4.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { four: value4.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  }
}

//重点销售区域
const value5 = ref('')
const radioChange5 = async () => {
  if (value5.value == '接口数据') {
    let jkval = { five: value5.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { five: value5.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  }
}

//农机数量统计接口切换
const value6 = ref()
const radioChange6 = async () => {
  if (value6.value == '接口数据') {
    let jkval = { six: value6.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { six: value6.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  }
}

//农机耕作时长
const value7 = ref()
const radioChange7 = async () => {
  if (value7.value == '接口数据') {
    let jkval = { seven: value7.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { seven: value7.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  }
}

//农机服务金额
const value8 = ref()
const radioChange8 = async () => {
  if (value8.value == '接口数据') {
    let jkval = { eight: value8.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { eight: value8.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  }
}

//种植面积
const value9 = ref()
const radioChange9 = async () => {
  if (value9.value == '接口数据') {
    let jkval = { nine: value9.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { nine: value9.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  }
}

//预计产量统计
const value10 = ref()
const radioChange10 = async () => {
  if (value10.value == '接口数据') {
    let jkval = { ten: value10.value }
    Object.assign(props.Data, jkval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  } else {
    let bjval = { ten: value10.value }
    Object.assign(props.Data, bjval)
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(props.Data) })
  }
}

//获取近12个月
const xsData = ref()

watch(
  () => props.Data,
  (val) => {
    xsData.value = [
      val.xsprice1,
      val.xsprice2,
      val.xsprice3,
      val.xsprice4,
      val.xsprice5,
      val.xsprice6,
      val.xsprice7,
      val.xsprice8,
      val.xsprice9,
      val.xsprice10,
      val.xsprice11,
      val.xsprice12
    ]
    value1.value = val.one
    value2.value = val.two
    value3.value = val.three
    value4.value = val.four
    value5.value = val.five
    value6.value = val.six
    value7.value = val.seven
    value8.value = val.eight
    value9.value = val.nine
    value10.value = val.ten
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
.Dp-header {
  display: flex;
  align-items: center;
  .radio {
    margin-left: 20px;
  }
}
.DpBodyLayout {
  display: flex;
  flex-direction: column;

  .Dp-num {
    width: 100%;
    height: 200px;

    .content {
      width: 50%;
      height: 100%;
      display: flex;

      .left {
        height: 100%;
        display: flex;
        align-items: center;
      }

      .right {
        height: 100%;
        margin-left: 10px;
        display: flex;
        align-items: center;
        text-indent: 2em;
      }
    }
  }

  .Dp-zc {
    width: 100%;
    height: auto;

    .zc {
      display: flex;
      flex-wrap: nowrap;

      .zc-bg {
        flex: 1;
        max-width: 200px;
        background: url('/yz.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px;

        .num {
          width: 100%;
          text-align: center;
          line-height: 30.5px;
          font-size: 30px;
        }

        .text {
          width: 100%;
          text-align: center;
          font-weight: bold;
          margin-top: 20px;
        }
      }
    }
  }

  .Dp-yx {
    margin-top: 70px;
    width: 100%;
    height: auto;
    .yx {
      display: flex;
      justify-content: start;
      height: 100%;
      margin: 10px 0;
      .yx-comtent {
        display: flex;
        width: 15%;
        justify-content: space-between;
        margin-right: 20px;
      }
    }
    .yx-price {
      display: flex;
      flex-direction: column;
      justify-content: start;
      height: 100%;
      margin-top: 20px;
      .yx-price-title {
        display: flex;
        justify-content: space-between;
        width: 30%;
      }
      .yx-price-content {
        margin-top: 5px;
        display: flex;
        margin-right: 20px;
        justify-content: space-between;
        width: 30%;
        font-size: 13px;
      }
    }
  }

  .Dp-xsprice {
    width: 100%;
    height: auto;
    margin-top: 20px;
    .xsprice-content {
      display: flex;
      flex-direction: column;
      width: 20%;
      .xsprice-title {
        display: flex;
        justify-content: space-between;
      }
      .xsprice-text {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
      }
    }
  }

  .Dp-cp {
    margin-top: 20px;
    width: 100%;
    height: 170px;

    .cp {
      display: flex;
      flex-direction: column;

      .cp-comtent {
        display: flex;
        width: 20%;
        justify-content: space-between;
        margin: 5px 0;
      }
    }
  }

  .Dp-blurb {
    margin-top: 40px;
    width: 50%;
    height: 150px;

    .blurb {
      width: 100%;
      height: 100%;
    }
  }

  .Dp-nj {
    width: 100%;
    height: 170px;

    .nj {
      display: flex;
      flex-direction: column;

      .nj-comtent {
        display: flex;
        width: 40%;
        justify-content: space-between;
        margin: 5px 0;
      }
    }
  }

  .Dp-nj-time {
    margin-top: 40px;
    width: 100%;
    height: 80px;

    .nj-time {
      display: flex;
      justify-content: space-between;
      width: 60%;

      .nj-time-comtent {
        display: flex;
        width: 20%;
        justify-content: space-between;
        margin-right: 20px;
      }
    }
  }

  .Dp-fw {
    width: 100%;
    height: 80px;

    .fw {
      display: flex;
      width: 40%;
      justify-content: space-between;

      .fw-comtent {
        width: 40%;
        display: flex;
        justify-content: space-between;
        margin-right: 10px;
      }
    }
  }

  .Dp-jg {
    width: 100%;
    height: 150px;

    .jg {
      display: flex;
      flex-direction: column;
      width: 20%;

      .jg-comtent {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .Dp-key {
    width: 100%;
    height: auto;
    .key {
      width: 30%;
      .key-comtent {
        width: 100%;
        display: flex;
        .text {
          display: flex;
          flex: 1;
          text-align: center;
          justify-content: space-between;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
